<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height:38px;
            background-color:#dddddd;
            line-height:38px;
        }
    </style>
</head>
<body style=" margin:0 auto"> <!--这里的margin是html上下没间隔-->
    <div class="pg-header">  <!--   个人习惯（页面最上面的一栏）   -->
        <div style="width:80%;margin:0 auto">  <!--这里的margin会自动居中-->
            <div style="float:left;">收藏本站</div>   <!--float标签-->
            <div style="float:right;">
                <a href="http://www.beam.pub">登录</a>
                <a href="http://www.beam.pub">注册</a>
            </div>
        </div>
    </div>
    <div style=";width:100%;border:1px solid red">   <!-- 第二栏，划分了左右二块 -->
        <!--左边那块-->
        <div style="width:40%;height:500px;float:left">
            左边
        </div>
        <!--右边那块-->
        <div style="width:60%;height:500px;float:left">
            右边
        </div>
        <div style="clear:both;"></div>  <!--发现父边框(即外层边框)没有了，加上这段即可-->
    </div>
</body>
</html>